<template>
  <div>
    <!-- 头部区域 -->
   <div class="hearder">
      <el-card class="card">
     <el-row>
         <el-col :span="24">
          <div >
<el-form :inline="true" :model="from" >
  <el-form-item label="设备编号" >
    <el-input v-model="vmsear.innerCode" placeholder="请输入"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="chaxun">查询</el-button>
  </el-form-item>
</el-form>
          </div>
          </el-col>
      </el-row>
      </el-card>
    </div>
    <!-- 头部尾部 -->
    <div class="dk">
   <el-card class="cards">
     <el-row>
       <el-col :span="24">
 <el-button icon="el-icon-circle-plus" type="danger" @click="xinjian">新建</el-button>
          <el-button  @click="piliang">批量操作</el-button>
        </el-col>
                                    <!-- 批量策略管理弹窗区域 -->
           <el-dialog title="批量策略管理" :visible="vmpiliang" width="40%"  @close="vmpiliangs">
           <el-form  :model="inner" ref="inners">
             <el-form-item label="活动区域">
               <el-select v-model="inner.policyId" placeholder="请选择活动区域">
             <el-option
             v-for="item in vmZf"
             :key="item.policyId"
             :label="item.policyName"
             :value="item.policyId"
             ></el-option>
    </el-select>
             </el-form-item>
           </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="vmpiliangs">取 消</el-button>
    <el-button type="primary" @click="Vmsumbit">确 定</el-button>
  </span>
           </el-dialog>
                                  <!-- 新增设备弹窗 -->
        <el-dialog title="新增设备" :visible="vmdialog" width="30%"  @close="vmdivg">
         <el-row>
         <el-col :span="24">
          <el-descriptions>
          <el-descriptions-item label="设备编号">系统自动生成</el-descriptions-item>
          </el-descriptions>
         </el-col>
         <el-col :span="24">
          <el-form :model="vmmodel" :rules="roleRules" ref="refvm" label-width="100px">
              <el-form-item label="选择型号" prop="vmType" >
       <el-select v-model="vmmodel.vmType" placeholder="请选择">
        <el-option
          v-for="item in vmlx"
          :key="item.typeId"
        :label="item.name"
        :value="item.typeId">
        </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="选择点位" prop="nodeId">
       <el-select v-model="vmmodel.nodeId" placeholder="请选择">
        <el-option
    v-for="obj in vmno"
         :key="obj.id"
        :label="obj.name"
        :value="obj.id">
        </el-option>
                </el-select>
            </el-form-item>
          </el-form>
         </el-col>
       </el-row>

              <span slot="footer" class="dialog-footer">
    <el-button @click="vmdivg">取消</el-button>
    <el-button type="primary" @click="sumbit">确定</el-button>
  </span>
          </el-dialog>

                            <!-- 表格区域 -->
        <el-col>
           <el-table  ref="multipleTable" :data="vmdata"  tooltip-effect="dark"
           style="width: 100%"  @selection-change="handleSelectionChange">
    <el-table-column   type="selection"    width="55" ></el-table-column>
    <el-table-column  type="index"    label="序号"  width="100">
      <template slot-scope="scope">
                    <span>{{ scope.$index + (vmsear.pageIndex - 1) * vmsear.pageSize + 1 }}</span>
                </template>
    </el-table-column>
    <el-table-column  prop="innerCode"     label="设备编号" width="150"> </el-table-column>
    <el-table-column  prop="type.name"   label="设备型号" width="160"></el-table-column>
    <el-table-column  prop="node.name"   label="详细地址" width="180"></el-table-column>
    <el-table-column  prop="ownerName"   label="合作商" width="230"></el-table-column>
    <el-table-column  prop="vmStatus"   label="设备状态" width="180">
      <template #default="{ row }">
               {{ statu[row.vmStatus] }}
           </template>
    </el-table-column>
    <el-table-column label="操作">
     <template #default="{ row }">
          <div class="flx">
        <el-button type="text" size="small" @click="huodao(row.innerCode,row)">货道</el-button>
        <el-button type="text" size="small" @click="celue(row.innerCode)">策略</el-button>
        <el-button  type="text" size="small" @click="xiugai(row)">修改</el-button>
          </div>
      </template>
    </el-table-column>
  </el-table>
        </el-col>
                        <!-- 表格尾部 -->
        </el-row>
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
           <el-button @click="shang">上一页</el-button>
           <el-button  @click="xia">下一页</el-button>
        </el-row>
   </el-card>
            <!-- 修改设备弹窗区域 -->
            <el-dialog title="修改设备" :visible="vmdialogxg" width="30%"  @close="vmdivgxg">
              <el-row>
            <el-col :span="24">

              <el-descriptions >
         <el-descriptions-item label="机器编号">{{innerCode}}</el-descriptions-item>
         </el-descriptions>
            </el-col>
            <el-col :span="24">
              <el-descriptions >
         <el-descriptions-item label="供货时间">{{formatDate(lastSupplyTime)}}</el-descriptions-item>
         </el-descriptions>
            </el-col>
            <el-col :span="24">
              <el-descriptions >
         <el-descriptions-item label="设备类型">{{type.name}}</el-descriptions-item>
         </el-descriptions>
            </el-col>
            <el-col :span="24">
              <el-descriptions >
         <el-descriptions-item label="设备容量"></el-descriptions-item>
         </el-descriptions>
            </el-col>
       <el-col :span="24">
              <el-descriptions >
         <el-descriptions-item label="设备点位">
           <el-select v-model="nodeId" placeholder="请选择">
            <el-option
         v-for="obj in vmno"
         :key="obj.id"
        :label="obj.name"
        :value="obj.id">
        </el-option>
                  </el-select>
         </el-descriptions-item>
         </el-descriptions>
            </el-col>
            <el-col :span="24">
              <el-descriptions >
         <el-descriptions-item label="合作商">{{ownerName}}</el-descriptions-item>
         </el-descriptions>
            </el-col>
            <el-col :span="24">
              <el-descriptions >
         <el-descriptions-item  label="所属区域">{{region.name}}</el-descriptions-item>
         </el-descriptions>
            </el-col>
            <el-col :span="24">
              <el-descriptions >
         <el-descriptions-item label="设备地址">{{node.name}}</el-descriptions-item>
         </el-descriptions>
            </el-col>
              </el-row>
    <span slot="footer" class="dialog-footer">
    <el-button @click="vmdivgxg">取消</el-button>
    <el-button type="primary">确定</el-button>
  </span>
            </el-dialog>
                               <!-- 策略管理弹窗 -->
        <el-dialog title="策略管理" :visible="vmClue" width="40%"  @close="vmClues">
          <el-row>
  <el-col :span="24">
    <el-descriptions>
    <el-descriptions-item label="机器编号">{{innerCode}}</el-descriptions-item>
    <el-descriptions-item label="策略名称">{{policyName}}</el-descriptions-item>
</el-descriptions>
<el-descriptions>
    <el-descriptions-item label="策略方案">{{discount}}%</el-descriptions-item>
</el-descriptions>
  </el-col>
           </el-row>
     <span slot="footer">
    <el-button @click="vmClues">取消策略</el-button>
  </span>
                 </el-dialog>
                                  <!-- 货道弹窗区域 -->
                 <el-dialog title="货道设置" :visible="vmHd" width="60%"  @close="vmHds">
           <el-card class="bgpurpleda">
              <el-row type="flex" style="height: 20px" align="middle" justify="space-between">
                <el-col :span="20"><div >
                        <el-row  type="flex" justify="space-between" >
                          <el-col>货道行数:<span>{{vmRow}}</span></el-col>
                          <el-col>货道列数:<span>{{vmCol}}</span></el-col>
                          <el-col>货道容量(个):<span>{{channelMaxCapacity}}</span></el-col>
                        </el-row>
                  </div>
                  </el-col>
                <el-col :span="4">
                 <el-button type="primary">智能排货</el-button>
                </el-col>
              </el-row>
                  </el-card>
              <div class="ddd">
                <el-scrollbar style="height:400px" >
           <el-row :gutter="20">
          <el-col :span="5" v-for="(item,index) in Vmks" :key="index"><div class="hs" >
    <el-card :body-style="{ padding: '0px' }">
          <div class="code">{{item.channelCode}}</div>
          <div class="sku" >
           <el-image style="width: 80px; height: 80px" :src="item.sku && item.sku.skuImage"></el-image>
           <p class="name">{{item.sku && item.sku.skuName}}</p>
               </div>
               <!-- <div class="sku"> -->
       <!-- <el-image style="width: 80px; height: 80px" src="…f/7gKJI+RVPZb+bjKfwGFjihtQmXGoAAAAABJRU5ErkJggg"></el-image>
           <p class="name">暂无商品</p> -->
               <!-- </div> -->
    <div>
       <el-button type="text" class="bu">添加</el-button>
       <el-button type="text" class="on" @click="VmShan(item)">删除</el-button>
    </div>
    </el-card>
    </div>
    </el-col>
                  </el-row>
                </el-scrollbar>
               </div>
                    <span slot="footer">
               <el-button type="primary">确定</el-button>
            </span>
                 </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  VmSearch, VmLx, Nodes,
  VmShou, VmXiuGai, VmPoliy, VmIncode, VmType, VmChanne, VmAppPly
} from '@/api'
import dayjs from 'dayjs'
export default {
  data () {
    return {
      value: '',
      vmdialog: false, // 新增设备弹窗
      vmdialogxg: false, // 修改设备弹窗
      vmpiliang: false, // 批量策略管理弹窗
      vmHd: false, // 货道设置弹窗
      vmClue: false, // 策略管理弹窗
      vmdata: [], // 表格数据
      vmlx: [], // 选择型号列表数据
      vmno: [], // 选择点位列表数据
      vmZf: [], // 选择策略列表数据
      Vmks: [], // 货道数据
      vmmodel: {
        vmType: '',
        nodeId: '',
        createUserId: 1
      },
      roleRules: {
        vmType: [
          { required: true, message: '角色名称不能为空', trigger: 'blur' }
        ],
        nodeId: [
          { required: true, message: '角色描述不能为空', trigger: 'blur' }
        ]
      },
      typeId: {

      },
      innerCode: '', // 机器编号
      lastSupplyTime: '', // 供货时间
      type: '', // 设备类型
      ownerName: '', // 合作商
      region: '', // 所属区域
      node: '', // 设备地址
      nodeId: '', // 设备点位
      policyName: '',
      discount: '',
      vmRow: '',
      vmCol: '',
      channelMaxCapacity: '',
      from: {
        name: ''
      },
      inner: {
        innerCodeList: [],
        policyId: ''
      },
      VmId: {
        id: '',
        nodeId: ''
      },
      vmsear: {
        pageIndex: 1,
        pageSize: 10,
        innerCode: '',
        name: '',
        regionId: ''
      },
      statu: {
        0: '未投放',
        1: '运营',
        3: '撤机'
      },
      multipleSelection: []
    }
  },
  async created () {
    this.vms()
    const res = await VmLx(this.vmsear)
    this.vmlx = res.data.currentPageRecords
    const re = await Nodes(this.vmsear)
    this.vmno = re.data.currentPageRecords
    const ree = await VmPoliy(this.vmsear)
    this.vmZf = ree.data
  },
  methods: {
    // 格式化时间
    formatDate (value) {
      return dayjs(value).format('YYYY-MM-DD')
    },
    // 查询
    chaxun () {
      this.vms()
    },
    // 新建
    async  xinjian () {
      this.vmdialog = true
    },
    // 确定新建
    sumbit () {
      this.$refs.refvm.validate(async (valid) => {
        if (!valid) return
        const res = await VmShou(this.vmmodel)
        console.log(res)
        this.$message.success('新增成功')
        this.vmdivg()
        this.vms()
      })
    },
    vmdivg () {
      this.vmdialog = false
    },
    // 表格数据
    async vms () {
      const re = await VmSearch(this.vmsear)
      this.vmdata = re.data.currentPageRecords
    },
    // 货道
    async  huodao (innerCode, row) {
      // console.log(row)
      this.vmHd = true
      const ks = await VmChanne(innerCode)
      this.Vmks = ks.data
      const gs = await VmType(row.type.typeId)
      // console.log(vm)
      this.vmRow = gs.data.vmRow
      this.vmCol = gs.data.vmCol
      this.channelMaxCapacity = gs.data.channelMaxCapacity
    },
    vmHds () {
      this.vmHd = false
    },
    // 策略
    async celue (innerCode) {
      const { data } = await VmIncode(innerCode)
      // console.log(data)
      if (!data) {
        this.piliang()
        return
      }
      this.vmClue = true
      this.innerCode = data.innerCode
      this.policyName = data.policyName
      this.discount = data.discount
    },
    // 确定策略
    async  Vmsumbit () {
      await VmAppPly(this.inner)
      this.$message.success('修改成功')
      this.vmpiliangs()
    },
    vmClues () {
      this.vmClue = false
    },
    // 修改
    async  xiugai (row) {
      this.vmdialogxg = true
      // console.log(row)
      this.innerCode = row.innerCode
      this.lastSupplyTime = row.lastSupplyTime
      this.type = row.type
      this.ownerName = row.ownerName
      this.nodeId = row.nodeId
      this.region = row.region
      this.node = row.node
      const ref = await VmXiuGai({ id: row.id, nodeId: row.nodeId })
      console.log(ref)
      // this.vmmodel = ref.data
    },
    vmdivgxg () {
      this.vmdialogxg = false
    },
    // 批量操作
    piliang () {
      if (this.multipleSelection.length === 0) {
        this.$message.error('请勾选售货机')
      } else {
        this.vmpiliang = true
      }
    },
    handleSelectionChange (val) {
      val.forEach(item => {
        this.inner.innerCodeList.push(item.innerCode)
      })
      // console.log(this.inner)
      this.multipleSelection = val
    },
    vmpiliangs () {
      this.vmpiliang = false
    },
    // 删除图片
    VmShan (item) {
      item.sku.skuName = ''
      item.sku.skuImage = ''
    },
    // 分页
    shang () {
      if (this.vmsear.pageIndex === 1) {
        return false
      } else {
        this.vmsear.pageIndex--
        this.vms()
      }
    },
    xia () {
      this.vmsear.pageIndex++
      this.vms()
    }
  }

}
</script>

<style scoped lang='less'>
.hearder{
  padding: 10px;
.card{
 padding: 5px
}
}
.dk{
    padding: 10px;
  .cards{
 padding: 5px
  }
}
.bgpurpleda{
  background: #99a9bf;
}
.flx{
  display: flex;
  // flex-wrap: wrap;
}
.ddd{
  margin-top: 25px;
  margin-left: 20px;
  .code{
    position: absolute;
    top: 10px;
    left: 0;
    width: 43px;
    height: 23px;
    line-height: 23px;
    background: #829bed;
    border-radius: 0 10px 10px 0;
    font-size: 12px;
    color: #fff;
  }
  .sku{
    height: 135px;
    padding-top: 16px;
    background-color: #f6f7fb;
    border-radius: 4px;
    .name{
    padding: 0 16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    }
  }
  .bu{
color: #5f84ff;
  }
  .on{
color: #ff5a5a;
  }
  .hs{
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 15px;
    position: relative;
    width: 150px;
    height: 180px;
    background: #fff;
    border-radius: 4px;
    text-align: center;
  }
}
</style>
